<!--  -->
<template>
  <div class="conts">
    <div class="nas">
      <div class="lef">
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </div>
        <el-button type="primary">查询</el-button>
      </div>
      <div class="rgt">
        <el-button type="primary" plain>批量导出</el-button>
      </div>
    </div>
    <div class="bales">
      <el-table :data="tableData" style="width: 100%" max-height="470">
        <el-table-column fixed prop="date" label="用户名" width="280"> </el-table-column>
        <el-table-column prop="name" label="浏览数" width="280"> </el-table-column>
        <el-table-column prop="province" label="分享数" width="180"> </el-table-column>
        <el-table-column prop="city" label="关注数" width="280"> </el-table-column>
        <el-table-column fixed="right" label="操作" >
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              转为线索 &thinsp; &#124;
            </el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footers">
           <div class="block">
    <el-pagination
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
          currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
      tableData: [
        {
          date: 'jianmei-9300',
          name: '34',
          province: '2',
          city: '20',

          zip: 200333,
        },
        {
          date: 'jianmei-9300',
          name: '34',
          province: '2',
          city: '20',
          zip: 200333,
        },
        {
          date: 'jianmei-9300',
          name: '34',
          province: '2',
          city: '20',
          zip: 200333,
        },
        {
          date: 'jianmei-9300',
          name: '34',
          province: '2',
          city: '20',
          zip: 200333,
        },
        {
          date: 'jianmei-9300',
          name: '34',
          province: '2',
          city: '20',
          zip: 200333,
        },
        {
          date: 'jianmei-9300',
          name: '34',
          province: '2',
          city: '20',
          zip: 200333,
        },
        {
          date: 'jianmei-9300',
          name: '34',
          province: '2',
          city: '20',
          zip: 200333,
        },
      ],
             pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
    }
  },
  created() {},
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
  },
  beforeDestroy() {},
}
</script>

<style lang='scss' >
.conts {
  width: 100%;
  height: 649px;
  .nas {
    height: 42px;
    margin: 20px 0px 22px 19px;

    display: flex;
    .lef {
      display: flex;
      width: 50%;
      height: 42px;
      .block {
        margin-right: 10px;
      }
    }
    .rgt {
      text-align: right;
      width: 42px;
      width: 50%;
      margin-right: 32px;
    }
  }
  .bales{
      width: 100%;
     .footers{
         width: 100%;
         margin-top: 38px;
         .block{
             width: 80%;
             margin: 0 auto;
             .el-pagination{
                 width: 100%;
                 text-align: center;
             }
         }
     } 
  }
}
</style>
